<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
			.door {
				margin: 300px auto;
				width: 600px;
				height: 400px;
				background-color: pink;
				background:  url(images/2000949.jpg) 0 0 no-repeat;
				background-size: cover;
				perspective: 1500px;
					position: relative;
			}
			.door-l,
			.door-r {
				width: 50%;
				height: 100%;
	
				/* background-color: red; */
				float: left;
				/* position: absolute; */
				/* top: 0; */
				border: 1px solid #000;
				box-sizing: border-box;
				transition: all 1s;
				/* position: absolute; */
				position: relative;
				background-color: red;

			}
			.door-l {
				/* left: 0; */
				transform-origin: left;
				text-align: right;
				line-height: 400px;
				font-size: 12px;
			}
			.door-r {
				/* right: 0; */
				transform-origin: right;
				text-align: left;
				line-height: 400px;
				font-size: 12px;
			}
			.door:hover .door-l {
				transform: rotateY(-120deg);
			}
			.door:hover .door-r {
				transform: rotateY(120deg);
			}
			.door-l::before,
			 .door-r::before {
				content: "";
				width: 30px;
				height: 30px;
				position: absolute;
				top: 50%;
				right: 5px;
				border: 1px solid yellow;
				transform: translate(0, -50%);
				border-radius: 50%;
			}
			.door-l::before {
				
				right: 5px;
				
			}
			.door-r::before {
				
				left: 5px;
				
			}

			/* wenzi? */
			.door-l span,
			.door-r span {
				font-size: 50px;
				position: absolute;
				top: -70px;
				left: 100px;
			}

        </style>
    </head>
    <body>
    <div class="door">
    	<div class="door-l">开门
    	<span>开门</span></div>
    	<div class="door-r">大吉
    	<span>大吉</span></div>
    </div>
    </body>
</html>